<template>
	<view class="page">
		<view class="bg">
			<image src="/static/index_1.jpg"></image>
		</view>
		<view class="apps">
			<view class="items">
				<view class="item" @click="baoming">
					<image src="/static/baoming.png"></image>
					<view class="text">活动报名</view>
				</view>
				<view class="item" @click="log">
					<image src="/static/baomingjilu.png"></image>
					<view class="text">报名记录</view>
				</view>
				<view class="item" @click="hd_yy">
					<image src="/static/hd_yy.png"></image>
					<view class="text">活动预约</view>
				</view>
				<view class="item" @click="hd_log">
					<image src="/static/hd_log.png"></image>
					<view class="text">预约记录</view>
				</view>
				<view class="item" @click="hd_pingjia">
					<image src="/static/hd_pj.png"></image>
					<view class="text">活动评价</view>
				</view>
				<view class="item">

				</view>
			</view>
		</view>
	</view>
</template>


<script>
	const db = uniCloud.database();
	const banner_db = db.collection("opendb-banner")

	export default {
		data() {
			return {
				list: []
			}
		},
		onShow() {
			this.load_data();
		},
		methods: {
			hd_yy() {
				uni.navigateTo({
					url: '/pages/abu_activity_yuyue/add',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			hd_log() {
				uni.navigateTo({
					url: '/pages/abu_activity_yuyue/list',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			hd_pingjia() {
				uni.navigateTo({
					url: '/pages/abu_pingjia/add',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			baoming() {
				uni.navigateTo({
					url: './hd_list'
				});
			},
			log() {
				uni.navigateTo({
					url: './hd_log'
				});
			},
			async load_data() {
				try {
					const res = await banner_db.get();
					const res_data = res.result.data;
					this.list = res_data.map(item => item.bannerfile.url);
				} catch (error) {
					console.error('数据加载失败：', error);
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100vh;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;


		.bg {
			image {
				width: 100%;
			}
		}

		.apps {
			background-color: #fff;
			margin-top: -5px;


			.items {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-around;
			}

			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 45%;
				box-sizing: border-box;
				margin: 2.5%;
			}

			.item image {
				width: 50px;
				height: 50px;
			}

			.item .text {
				padding: 10px;
				font-size: 16px;
			}

		}
	}
</style>